<template>
  <div>
    <!--    {{chartOptions.series[0].data}}-->
    <highcharts
      :options="chartOptions"
      style="min-width: 400px; height: 500px"
    ></highcharts>
  </div>
</template>

<script>
  export default {
    name: 'BaseCharts',
    props: {
      optimizationData: {
        type: Object,
        default: () => {},
      },
      xTitle: {
        type: String,
        default: '',
      },
      yTitle: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        chartOptions: {
          chart: {
            //图表配置
            style: {
              // fontFamily: "",
              // fontSize: '12px',
              // fontWeight: 'bold',
              // color: '#DADDE1'
            },
            // zoomType: 'x',
            zoomType: 'x',
          },
          boost: {
            useGPUTranslations: true,
          },
          series: [{ data: [], lineWidth: 0.5, name: 'Basicinfo' }],
          // series: [{data:[{'x':1,'y':2},{'x':2,'y':2},{'x':3,'y':3},{'x':4,'y':4},{'x':5,'y':5}],lineWidth: 0.5,name:"Basicinfo"}],
          credits: {
            enabled: false, //右下角水印
          },
          title: {
            text: '', //标题
          },
          subtitle: {
            text: '', //副标题
          },
          tooltip: {
            valueDecimals: 8,
            headerFormat:
              '<span style="color:{point.color}">\u25CF</span>{series.name}<br>',
            pointFormat: '数据:(<b>{point.name} , {point.y:.8f}</b>)<br>',
            valuePrefix: 'y:',
          },
          legend: {
            enabled: false,
          },
          plotOptions: {
            series: {
              turboThreshold: 0, //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
              selected: true,
            },
          },
          yAxis: [
            {
              // 第一个 Y 轴，放置在左边（默认在坐标）
              title: {
                text: this.yTitle,
              },
            },
          ],
          xAxis: {
            title: {
              text: this.xTitle,
            },
          },
        },
      }
    },
    watch: {
      optimizationData: function (newValue, oldValue) {
        if (newValue.title != '') {
          this.chartOptions.series = newValue.series
          this.chartOptions.series[0].lineWidth = 0.5
          this.chartOptions.title.text = newValue.title
        }
      },
    },
    created() {
      // this.chartOptions.series[0].data = this.getData(1000);
    },
    methods: {
      getData: function (n) {
        var arr = [],
          i,
          a,
          b,
          c,
          spike
        for (i = 0; i < n; i = i + 1) {
          if (i % 100 === 0) {
            a = 2 * Math.random()
          }
          if (i % 1000 === 0) {
            b = 2 * Math.random()
          }
          if (i % 10000 === 0) {
            c = 2 * Math.random()
          }
          if (i % 50000 === 0) {
            spike = 10
          } else {
            spike = 0
          }
          let p = {
            x: undefined,
            y: undefined,
          }
          p.name = i
          p.x = i
          p.y = 2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
          arr.push({
            x: i,
            y: 2 * Math.sin(i / 100) + a + b + c + spike + Math.random(),
          })
        }
        return arr
      },
    },
  }
</script>

<style scoped></style>
